<template lang="">
    <ul class="header-nav">
        <li class="category-item home"><RouterLink to="/">首页</RouterLink></li>
        <li class="category-item">
            <a href="#">美食</a>
            <div class="layer">
                <ul class="sub-items">
                <li class="sub-item" v-for="i in 10" :key="i">
                    <a href="#">
                    <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(4).png" alt="">
                    <p>果干</p>
                    </a>
                </li>
                </ul>
            </div>
        </li>
        <li class="category-item"><a href="#">餐厨</a></li>
        <li class="category-item"><a href="#">艺术</a></li>
        <li class="category-item"><a href="#">电器</a></li>
        <li class="category-item"><a href="#">居家</a></li>
        <li class="category-item"><a href="#">洗护</a></li>
        <li class="category-item"><a href="#">孕婴</a></li>
        <li class="category-item"><a href="#">服装</a></li>
        <li class="category-item"><a href="#">杂货</a></li>
    </ul>
</template>
<script>
export default {
    name: 'AppHeaderNav'
}
</script>
<style scoped lang="less">
.header-nav {
    width: 820px;
    display: flex;
    justify-content: space-around;
    padding-left: 40px;
    > li.category-item {
        position: relative;
        margin-right: 40px;
        width: 38px;
        text-align: center;
        > a {
            font-size: 16px;
            line-height: 32px;
            height: 32px;
            display: inline-block;
        }
        &:hover {
            > a {
                color: @xtxColor;
                border-bottom: 1px solid @xtxColor;
            }
            > .layer {
                height: 132px;
                opacity: 1;
            }
        }
    }

    .layer {
        width: 1240px;
        background-color: #fff;
        position: absolute;
        left: -200px;
        top: 45px;
        height: 0;
        overflow: hidden;
        opacity: 0;
        box-shadow: 0 0 5px #ccc;
        transition: all 0.3s 0.1s;
        > ul.sub-items {
            display: flex;
            flex-wrap: wrap;
            padding: 0 70px;
            align-items: center;
            height: 132px;
            > li.sub-item {
                width: 110px;
                text-align: center;
                margin-right: 0;
                img {
                    width: 60px;
                    height: 60px;
                }
                p {
                    padding-top: 10px;
                }
                &:hover {
                    //  & 表示当前选择器的父级
                    p {
                        color: @xtxColor;
                    }
                }
            }
        }
    }
}
</style>
